<template>
  <div class="code-drawer">
    <div class="code-but-operation mb-15">
      <span class="s">api注释</span>
      <el-input v-model="generateApiData.apiNotes" placeholder="api注释" clearable style="width: 200px"></el-input>
      <span class="s">方法名</span>
      <el-input v-model="generateApiData.methodName" placeholder="方法名" clearable style="width: 200px"></el-input>
      <span class="s">表名</span>
      <el-input v-model="generateApiData.tableName" placeholder="表名" clearable style="width: 200px"></el-input>
      <el-button type="primary" @click="generateApi" class="ml-12">生成api</el-button>
    </div>
    <div class="code-but-operation">
      <el-button type="primary" icon="el-icon-plus el-icon--left" @click="addBut">添加api</el-button>
      <el-button type="success" icon="el-icon-refresh-left el-icon--left" @click="validateApi">验证api</el-button>
    </div>
    <ul class="mt-12">
      <li v-for="(item,key) in errArray" :key="key" class="mt-8">{{ item }}</li>
    </ul>
    <draggable v-model="propsData.apiProp.apiArray">
      <ul class="code-but-array" v-for="(item,key) in propsData.apiProp.apiArray" :key="key">
        <li>
          <span>api注释 {{ key + 1 }}</span>
          <el-input v-model="item.notes" placeholder="api注释 XX新增接口" clearable></el-input>
        </li>
        <li>
          <span>方法名 {{ key + 1 }}</span>
          <el-input v-model="item.name" placeholder="方法名" clearable></el-input>
        </li>
        <li>
          <span>请求地址 {{ key + 1 }}</span>
          <el-input v-model="item.path" placeholder="请求地址" clearable></el-input>
        </li>
        <li class="but-color">
          <span>请求方式 {{ key + 1 }}</span>
          <el-select v-model="item.mode" placeholder="请求方式">
            <el-option
                v-for="item in $store.state.requestMethodOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </li>
        <li class="but-color">
          <span>参数方式 {{ key + 1 }}</span>
          <el-select v-model="item.paramsMode" placeholder="参数方式">
            <el-option
                v-for="item in $store.state.paramsModeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </li>
        <li class="del">
          <el-button type="danger" @click="delBut(key)">删除 {{ key + 1 }}</el-button>
        </li>
      </ul>
    </draggable>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['propsData'],
  data() {
    return {
      generateApiData: {
        apiNotes: '',//api注释
        methodName: '',//方法名
        tableName: '',//表名
      },

      //错误数组
      errArray: []
    };
  },
  mounted() {
  },
  methods: {
    //生成api
    generateApi() {
      let apiNotes = this.generateApiData.apiNotes;//api注释
      let methodName = this.generateApiData.methodName;//方法名
      let tableName = this.generateApiData.tableName;//表名
      if (!tableName || !methodName || !apiNotes) {
        return false
      }
      //table分页列表
      let JsonData1 = {
        notes: `${apiNotes} 分页列表`,//api注释
        name: `${methodName}List`,//api 方法名
        path: `/${tableName}/list.do`,//请求地址
        mode: 'post',//请求方式
        paramsMode: 'params',//参数方式
        params: '',//接口参数
      }
      this.propsData.apiProp.apiArray.push(JsonData1);
      //table 新增/修改
      let JsonData2 = {
        notes: `${apiNotes} 新增/修改`,//api注释
        name: `${methodName}AddEdit`,//api 方法名
        path: `/${tableName}/save.do`,//请求地址
        mode: 'post',//请求方式
        paramsMode: 'data',//参数方式
        params: '',//接口参数
      }
      this.propsData.apiProp.apiArray.push(JsonData2);
      //table 删除
      let JsonData3 = {
        notes: `${apiNotes}  删除`,//api注释
        name: `${methodName}Del`,//api 方法名
        path: `/${tableName}/delete.do`,//请求地址
        mode: 'post',//请求方式
        paramsMode: 'params',//参数方式
        params: '',//接口参数
      }
      this.propsData.apiProp.apiArray.push(JsonData3);
      //table 单条数据查询
      let JsonData4 = {
        notes: `${apiNotes}  单条数据查询`,//api注释
        name: `$${methodName}Query`,//api 方法名
        path: `/${tableName}/get${this.Utils.englishInitialCapital(tableName)}.do`,//请求地址
        mode: 'post',//请求方式
        paramsMode: 'params',//参数方式
        params: '',//接口参数
      }
      this.propsData.apiProp.apiArray.push(JsonData4);
      //table 不分页列表
      let JsonData5 = {
        notes: `${apiNotes}  不分页列表`,//api注释
        name: `${methodName}All`,//api 方法名
        path: `/${tableName}/all.do`,//请求地址
        mode: 'post',//请求方式
        paramsMode: 'params',//参数方式
        params: '',//接口参数
      }
      this.propsData.apiProp.apiArray.push(JsonData5);
      this.$message.success('生成api成功')
    },
    //验证api
    validateApi() {
      this.errArray = [];
      let forData = this.propsData.apiProp.apiArray;
      for (let i = 0; i < forData.length; i++) {
        let errString = ``;
        if (!forData[i].notes) {
          errString += `api注释${i + 1} `
        }
        if (!forData[i].name) {
          errString += `api方法名${i + 1} `
        }
        if (!forData[i].path) {
          errString += `请求方式${i + 1} `
        }
        if (errString) {
          this.errArray.push(errString)
        }
      }
      if (!this.errArray.length) {
        this.$message.success('验证完成，没有错误')
      }
    },
    //添加api
    addBut() {
      let jsonData = {
        notes: '',//api注释
        name: '',//api 方法名
        path: '',//请求地址
        mode: 'get',//请求方式
        paramsMode: 'params',//参数方式
      }
      this.propsData.apiProp.apiArray.push(jsonData);
    },
    //删除api
    delBut(key) {
      this.propsData.apiProp.apiArray.splice(key, 1);
    },
  },
};
</script>

<style lang="scss" scoped></style>
